<template>
	<view>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in firstList" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="" v-for="(item1,index1) in firstList" :key="index1">
					<view class="padding-top padding-lr" v-for="(item2,index2) in item1.items" :key="index2" :id="'main-'+index2">
						<view class="cu-bar solid-bottom bg-white">
							<view class="action">
								<text class="cuIcon-title text-green"></text> {{item2.name}}</view>
						</view>
						<view class="t-list">
							<view @click="navToList(item2.id, item3.id)" v-if="item3.pid === item2.id" class="t-item" v-for="item3 in item2.items" :key="item3.id">
								<text>{{item3.name}}</text>
							</view>
						</view>
						
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId:1,
				firstList: [],
				secondList: [],
				thirdList: [],
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			// let list = [{}];
			// for (let i = 0; i < 26; i++) {
			// 	list[i] = {};
			// 	list[i].name = String.fromCharCode(65 + i);
			// 	list[i].id = i;
			// }
			// console.log(list);
			// debugger
			// this.list = list;
			// this.listCur = list[0];
			var categoryUrl=this.requestUrl.category;
			var self=this;
			this.util.request(categoryUrl,'post',function(res){
				if(res.data.code==0 && res.data.data){
					// 一级分类 self.firstList
					self.firstList=res.data.data;
					console.log(self.firstList);
					// 二级分类 self.secondList
					// var fList=self.firstList;
					// for (let index in fList) {
					// 	for (let index2 in fList[index]['items']) {
					// 		self.secondList.push(fList[index]['items'][index2]);
					// 	}
					// }
					// // 三级分类 self.thirdList
					// var sList=self.secondList;
					// for (let index in sList) {
					// 	for (let index2 in sList[index]['items']) {
					// 		self.thirdList.push(sList[index]['items'][index2]);
					// 	}
					// }
				}
				
			})
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	
	.text-green, .line-green, .lines-green{color: $uni-text-color-zhu;}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding: 20upx;
		box-sizing: border-box;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size:$uni-font-size-base;
		color: $uni-text-color;
		padding-bottom: 20upx;
		padding:5rpx 10rpx;
		margin:10rpx;
		border:solid 1px $uni-border-color;
		border-radius:$uni-border-radius-lg;
	}
</style>
